<!--  -->
<template>
  <div class='project-page'>
    <div class="project-info flex-a-c">
      <van-image
        round
        width="55px"
        height="55px"
        :src="member.avatar"
      />
      <div>
        <div class="member-nickname flex-a-c">
          <h3>{{member.nickname}}</h3>
          <p>{{member.level_name}}</p>
        </div>
        <div class="member-id">ID:{{member.uid}}</div>
      </div>
    </div>
    <div class="performance flex-a-c ">
      <div class="performance-item" v-show="setting.show_first_offline_manager === 1" @click.stop="directlyOn">
        <h3>{{statistic.children_manager}}人</h3>
        <p>直属小组</p>
      </div>
      <div class="performance-item" v-show="setting.show_income_records === 1">
        <h3>{{statistic.children_order}}</h3>
        <p>小组业绩</p>
      </div>
      <div class="performance-item" v-show="setting.show_income_records === 1">
        <h3>{{statistic.team_order}}</h3>
        <p>团队业绩</p>
      </div>
    </div>
    <!--累计奖励-->
    <div class="award" v-show="setting.show_income_records === 1">
      <div class="award-title flex-a-c flex-j-sb">
        <h3>累计奖励</h3>
        <p>￥{{statistic.grand_income}}</p>
      </div>
      <div class="award-list flex">
        <div class="award-item">
          <h3>￥{{statistic.wait_income}}</h3>
          <p>未结算{{incomeName}}</p>
        </div>
        <div class="award-item">
          <h3>￥{{statistic.settled_income}}</h3>
          <p>已结算{{incomeName}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.wait_point}}</h3>
          <p>未结算{{point}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.settle_point}}</h3>
          <p>已结算{{point}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.wait_usable_love}}</h3>
          <p>未结算{{usableLove}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.settled_usable_love}}</h3>
          <p>已结算{{usableLove}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.wait_froze_love}}</h3>
          <p>未结算{{frozeLove}}</p>
        </div>
        <div class="award-item">
          <h3>{{statistic.settle_froze_love}}</h3>
          <p>已结算{{frozeLove}}</p>
        </div>
      </div>
    </div>
    <!--本月累计提成-->
    <div class="month-money" v-show="setting.show_income_records === 1">
      <div class="award-title flex-a-c flex-j-sb">
        <h3>本月累计提成</h3>
        <p>￥{{statistic.month_income}}</p>
      </div>
      <div class="month-time flex-a-c flex-j-sb">
        <div class="time-item">
          <h3>￥{{statistic.today_income}}</h3>
          <p>今日</p>
        </div>
        <div class="time-item">
          <h3>￥{{statistic.yesterday_income}}</h3>
          <p>昨日</p>
        </div>
        <div class="time-item">
          <h3>￥{{statistic.week_income}}</h3>
          <p>本周</p>
        </div>
      </div>
    </div>
    <!--项目管理奖励记录-->
    <div class="rewards" v-if="setting.show_income_records === 1">
      <div class="rewards-tab" >
        <van-tabs 
          v-model="active" 
          line-height="3px" 
          line-width="56px" 
          title-active-color="#FB6B68" 
          color="#FB6B68" 
          @click="rewardsTab"
          ref="tabs">
          <block v-for="(item,index) in rewardsArr" :key="index" >
            <van-tab :title="item.name" :name="item.status"></van-tab>
          </block>
        </van-tabs>
        <div class="rewards-select flex">
          <div class="rewards-status" @click.stop="royaltiesOn">
            <span>{{rewardName}}</span>
            <span class="iconfont icon-course_down" :class="rewardStatus?'iconRight':''"></span>
            <div class="rewards-popup" v-show="rewardStatus">
              <div v-for="(item,index) in deductList" :key="index" @click.stop="deductOn(item,'settledStatus')">{{item.name}}</div>
            </div>
          </div>
          <div class="rewards-type" @click.stop="royaltiesTypeOn">
            <span>{{balanceName}}</span>
            <span class="iconfont icon-course_down" :class="rewardType?'iconRight':''"></span>
            <div class="rewards-popup" v-show="rewardType">
                <div v-for="(item,index) in rewardArr" :key="index" @click.stop="deductOn(item,'settledType')" >{{item.name}}</div>
            </div>
          </div>
            
        </div>
      </div>
      <div class="rewards-list" v-if="setting.show_income_records === 1 && rewardsList.length > 0">
          <div class="rewards-item" v-for="(item,index) in rewardsList" :key="index">
            <div class="rewards-order flex-a-c flex-j-sb">
              <div class="order flex">
                <h3>{{item.order_sn}}</h3>
                <div class="status-btn" :class="item.settled_status===1?'red':''">{{item.settled_status_name}}</div>
              </div>
              <div class="price">￥{{item.award_amount}}</div>
            </div>
            <div class="item-time flex-a-c flex-j-sb">
              <div>{{item.created_at}}</div>
              <div>{{item.settled_type_name}}</div>
            </div>
            <div class="member" v-show="setting.show_order_buyer === 1 || setting.show_order_detail === 1">
              <div class="member-head flex-a-c" v-show="setting.show_order_buyer === 1">
                <van-image
                  round
                  width="25px"
                  height="25px"
                  :src="item.buy_member && item.buy_member.avatar"
                />
                <div class="flex-a-c member-user">
                  <h3>{{item.buy_member && item.buy_member.nickname}}</h3>
                  <span v-if="item.buy_member && item.buy_member.yz_member &&  item.buy_member.yz_member.wechat">(微信号:{{item.buy_member && item.buy_member.yz_member &&  item.buy_member.yz_member.wechat}})</span>
                </div>
              </div>
              <div class="member-container" v-show="setting.show_order_detail === 1 && item.order_goods">
                <div class="member-goods flex">
                  <img :src="item.order_goods && item.order_goods.thumb" />
                  <div class="flex-j-c goods-msg">
                    <div class="flex-j-sb flex-a-c msg-title">
                      <div class="goods-title pl">{{item.order_goods && item.order_goods.title}}</div>
                      <div class="num">x{{item.order_goods && item.order_goods.total}}</div>
                    </div>
                    <div class="flex-j-sb flex-a-c makeprice">
                      <!-- <div class="goods-price">￥{{item.order && item.order.order_goods && item.order.order_goods.price}}</div> -->
                      <div class="goods-makeprice">共计:￥{{item.order_goods && item.order_goods.price}}</div>
                    </div>
                  
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
      <van-empty description="暂无数据"  v-else/>
    </div>
    <div class="mb-40"></div>
  </div>
</template>

<script>
import project_controller from "./project_controller.js";
export default project_controller;
</script>
<style scoped>
  .rewards-tab ::v-deep .van-tabs__line{
    bottom:1.3125rem;
  }
  .pl {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<style lang="scss" scoped>

/* @import url(); 引入公共css类 */
  @mixin awardlist {
    .award-title {
        border-bottom: 0.0625rem solid #F0F0F1;
        padding:0 0 0.75rem 0;
        h3 {
          font-size: 0.875rem;
          color: #3B3B4A;
          font-weight: 500;
        }
        p {
          color: #F15353;
          font-size: 0.875rem;
        }
    }
  }
  .mb-40 {
    height: 2.5rem;
    clear: both;
  }
  .mb-8 {
    padding:0 0 0 0.5rem;
  }
  .project-page {
    height: auto;
    min-height: 100vh;
    // background: linear-gradient(180deg, #F15353 155px, #FAFAFA 100%);
    background-image: linear-gradient(var(--themeBaseColor)  160px, #FAFAFA 220px ,#FAFAFA 100%);
    .project-info {
      padding:0.8125rem 0.75rem 1.5rem 0.75rem;
      .member-nickname {
        padding:0 0 0 13px;
        text-align: left;
        h3 {
          font-size: 16px;
          font-weight: bold;
          color: #FFFFFF;
          padding:0 0.375rem 0 0;
        }
        p {
          font-size: 0.6875rem;
          line-height: 0.6875rem;
          padding:0.1875rem 0.375rem;
          color:#fff;
          background: rgba(255,255,255,0.39);
          border-radius: 0.625rem;
        }
      }
      .member-id {
        font-size: 0.6875rem;
        line-height: 0.6875rem;
        color: #FFFFFF;
        padding:0.625rem 0 0 0.8125rem;
        text-align: left;
      }
    }
    .performance {
      padding:0 0.75rem 1.25rem 0.75rem;
      .performance-item {
        flex:0 0 33%;
        color:#fff;
        h3 {
          font-size: 1rem;
          padding-bottom: 0.375rem;
          font-weight: bold;
        }
        p {
          font-size: 0.75rem;
        }
      }
    }
    .award {
      border-radius: 0.3125rem;
      padding:0.75rem;
      background: #FFFFFF;
      margin:0 0.75rem;
      @include awardlist;
      .award-list {
        flex-wrap: wrap;
        padding:0.625rem 0 0 0;
        margin:0 0 0.75rem 0;
       
        .award-item {
          flex:0 0 50%;
          text-align: left;
          padding:0 0 0.625rem 0;
          h3 {
            font-size: 0.9375rem;
            color: #3B3B4A;
            padding:0 0 0.5rem 0;
            font-weight: 500;
          }
          p {
            font-size: 0.75rem;
            color: #AAAAB3;
          }
          &:nth-last-child(1) {
            padding:0;
          }
          &:nth-last-child(2) {
            padding:0;
          }
        }
      } 
    }
    .month-money {
      margin:0.75rem 0.75rem 0 0.75rem;
      border-radius: 0.3125rem;
      background: #fff;
      padding: 0.75rem;
      @include awardlist;
      .month-time {
        padding:0.625rem 0 0 0;
        .time-item {
          flex: 0 0 33%;
          h3 {
            font-size: 0.9375rem;
            color: #3B3B4A;
            padding:0 0 0.375rem 0;
            font-weight: 500;
          }
          p {
            font-size: 0.75rem;
            color: #AAAAB3;
          }
        }
        
      }
    }
    .rewards {
      margin:0.75rem 0.75rem 0.75rem;
      background-color: #fff;
      padding:0 0.75rem 0 0.75rem;
      .rewards-select {
        padding:0.5rem 0 0 0;
        .rewards-status {
          font-size: 0.75rem;
          line-height: 0.875rem;
          padding:0.375rem 0.75rem 0.25rem 0.75rem;
          border-radius: 0.8125rem;
          border: 0.0625rem solid #6E6E79;
          position: relative;
          cursor: pointer;
          .icon-course_down {
            font-size: 0.875rem;
            padding:0 0 0 0.5rem;
            transition:0.5s;
            transform: rotateX(0deg);
            display: inline-block;
          }
          .iconRight {
            transition:0.5s;
            transform: rotateX(180deg);
          }
        }

        .rewards-type {
          @extend .rewards-status;
          margin:0 0 0 0.75rem;
        }
        .rewards-popup {
          position: absolute;
          display: inline-block;
          transition:0.5s;
          top:34px;
          left:0;
          background: #FFFFFF;
          border: 0.0625rem solid #E7E7E7;
          box-shadow: 0rem 0rem 0.125rem rgba(0,0,0,0.1);
          padding:0 0.6875rem;
          border-radius: 0.25rem;
          div {
            min-width: 4.375rem;
            font-size: 0.875rem;
            color: #333333;
            padding:0.75rem 0;
            border-bottom: 0.0625rem solid #F0F0F1;
            text-align: left;
            &:last-child {
              border:none;
            }
          }
          z-index: 10; 
        }
      }
      .rewards-list {
  
        .rewards-item {
          padding:0.875rem 0 0 0;
          border-bottom:  0.0625rem solid #F0F0F1;
          .rewards-order {
            .order {
              h3 {
                padding:0 0.5rem 0 0;
                color:#3B3B4A;
                font-weight: 400;
              }
              .status-btn {
                font-size: 0.6875rem;
                line-height: 0.6875rem;
                padding:0.25rem 0.5rem;
                border-radius: 0.1875rem;
                color:#ffffff;
                background: #D6D6DC;
              }
              .red {
                background-color: #F15353;
              }
            }
            .price {
              font-size: 0.875rem;
              color: #F15353;
              font-weight: 500;
            }
          }
          .item-time {
            padding:0.6875rem 0 0.75rem 0;
            div {
              font-size: 0.75rem;
              color: #AAAAB3;
            }
          }
          &:last-child {
            border:none;
          }
          .member {
            padding:0.75rem 0;
            margin: 0 0 0.75rem 0;
            border-radius: 0.1875rem;
            background: rgba(250,250,250,0.39);
            .member-head  {
              padding: 0 12px 12px 12px;
              .member-user {
                h3 {
                  padding:0 0.25rem 0 0.5rem;
                  font-size: 0.875rem;
                  color: #6E6E79;
                }
                span {
                  font-size: 0.75rem;
                  color: #AAAAB3;
                }
              }
              
            }
            .member-container {
              padding:12px 0 0 12px;
              border-top: 1px solid #F0F0F1;
              .member-goods {
                img {
                  width: 3.5625rem;
                  min-width: 3.5625rem;
                  height: 3.5625rem;
                  border-radius: 0.3125rem;
                  margin:0;
                }
                .goods-msg {
                  flex-direction: column;
                  padding:0 0.75rem 0 0.5rem;
                  width: 82%;
                  box-sizing: border-box;
                  .msg-title {
                    // width: 100%;
                    box-sizing: border-box;
                    padding:0 0 0.625rem 0;
                    font-size: 0.8125rem;
                    color: #3B3B4A;
                    .goods-title {
                      flex:2;
                      text-align: left;
                      line-height: 22px;
                      // padding:0 0 0.625rem 0;
                    }
                    .num {
                      flex:1;
                      text-align: right;
                    }
                  }
                  .makeprice {
                    justify-content: flex-end;
                  }
                  .goods-makeprice {
                    color: #F15353;
                    font-size: 0.8125rem;
                  }
                  .goods-price {
                    font-size: 0.8125rem;
                    color: #AAAAB3;
                  }
                }
              }
            }
          }
          
        }
      }
    }
  }
</style>